import AuthComponent from '@/components/Authorized/AuthComponent';
import React, { useState, useEffect, useRef } from 'react';
import { Table, DatePicker, Select, Button, Modal, message, Radio, Input } from 'antd';

import ProTable from '@ant-design/pro-table';
import styles from './index.less';
import { useRequest } from '@umijs/hooks';

import moment from 'moment';
import { exportExcel, formatFlightNo } from '@/utils/utils';
import { getHeavyLuggageInputList, exportHeavyLuggageInputExcel, queryCityInfo } from './service';
export default function() {
  const actionRef = useRef();
  const formRef = useRef();
  const [searchParams, setSearchParams] = useState({});
  const { data: selectData } = useRequest(queryCityInfo, { loadingDelay: true }); //获取出发和到达航站
  const [firstLoadDate, setFirstLoadDate] = useState(true);

  const columns = [
    {
      title: '订单起始日期',
      width: 100,
      dataIndex: 'orderStartDate',
      hideInTable: true,
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return <DatePicker style={{ width: '100%' }} format={format} {...rest} />;
      },
    },
    {
      title: '订单结束日期',
      width: 100,
      dataIndex: 'orderEndDate',
      hideInTable: true,
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return <DatePicker style={{ width: '100%' }} format={format} {...rest} />;
      },
    },
    {
      title: '航班起始日期',
      width: 100,
      dataIndex: 'flightStartDate',
      hideInTable: true,
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return <DatePicker style={{ width: '100%' }} format={format} {...rest} />;
      },
    },
    {
      title: '航班结束日期',
      width: 100,
      dataIndex: 'flightEndDate',
      hideInTable: true,
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return <DatePicker style={{ width: '100%' }} format={format} {...rest} />;
      },
    },
    { title: '批组号', width: 100, dataIndex: 'batchGroupNumber', hideInSearch: true },
    { title: '子批号', width: 100, dataIndex: 'subBatchNumber', hideInSearch: true },
    { title: '代理人号', width: 100, dataIndex: 'agentNumber', hideInSearch: true },
    { title: '公司代码', width: 100, dataIndex: 'companyCode', hideInSearch: true },
    { title: '票证类型', width: 100, dataIndex: 'ticketType', hideInSearch: true },
    { title: '票联号', width: 100, dataIndex: 'tktCNo', hideInSearch: true },
    { title: '出票日期', width: 100, dataIndex: 'issueTime', hideInSearch: true },
    // {
    //   title: '银行订单号',
    //   width: 120,
    //   dataIndex: 'bankOrderNo',
    //   hideInTable: true,
    //   // hideInSearch: true,
    // },
    // { title: '订单号', width: 100, dataIndex: 'orderNo', },
    { title: '出发地',
      width: 100,
      dataIndex: 'org',
      renderFormItem: (_, { ...rest }, form) => {
        return (
          <Select
            allowClear={true}
            showSearch
            placeholder="请选择"
            defaultActiveFirstOption={false}
            showArrow={false}
            filterOption={true}
            optionFilterProp="children"
            notFoundContent={null}
            {...rest}
          >
            {selectData &&
              selectData.map((v, i) => {
                return (
                  <Select.Option key={v.CITY3CODE} value={v.CITY3CODE}>
                    {v.CITYNAME}-{v.CITY3CODE}
                  </Select.Option>
                );
              })}
          </Select>
        );
      },
    },
    { title: '到达地',
      width: 100,
      dataIndex: 'dst',
      renderFormItem: (_, { ...rest }, form) => {
        return (
          <Select
            allowClear={true}
            showSearch
            placeholder="请选择"
            defaultActiveFirstOption={false}
            showArrow={false}
            filterOption={true}
            optionFilterProp="children"
            notFoundContent={null}
            {...rest}
          >
            {selectData &&
              selectData.map((v, i) => {
                return (
                  <Select.Option key={v.CITY3CODE} value={v.CITY3CODE}>
                    {v.CITYNAME}-{v.CITY3CODE}
                  </Select.Option>
                );
              })}
          </Select>
        );
      },
    },
    { title: '票号', width: 100, dataIndex: 'tktNo',},
    {
      title: '航班号',
      width: 100,
      dataIndex: 'flightNo',
      renderFormItem: (_, { type, defaultRender, ...rest }) => {
        return (
          <Input
            {...rest}
            onChange={e => {
              e.target.value = formatFlightNo(e.target.value);
              rest.onChange(e.target.value);
            }}
            allowClear
            maxLength={6}
            placeholder="3U"
          />
        );
      },
    },
    { title: '飞行日期', width: 100, dataIndex: 'flightDate', hideInSearch: true },
    { title: '行李重量', width: 100, dataIndex: 'overWeightBkgWeight', hideInSearch: true },
    { title: '声明价值附加费', width: 150, dataIndex: 'valuationCharge', hideInSearch: true },
    { title: '面额', width: 100, dataIndex: 'denomination', hideInSearch: true },
    { title: '标准手续费', width: 120, dataIndex: 'standardHandlingRate', hideInSearch: true },
    { title: '运费单价', width: 100, dataIndex: 'totalPrice', hideInSearch: true },
    { title: '客票公司代码', width: 120, dataIndex: 'passengerTicketCompanyCode', hideInSearch: true },
    { title: '客票票证类型', width: 120, dataIndex: 'passengerTicketType', hideInSearch: true },
    { title: '客票票号', width: 100, dataIndex: 'passengerTktNo', hideInSearch: true }
  ];

  const exportExcelHandle = async () => {
    let blobData = await exportHeavyLuggageInputExcel(searchParams);
    exportExcel(blobData, '逾重行李录入模板');
  };
  const initNowDate = (obj, key) => {
    obj[key] = moment().format('YYYY-MM-DD');
    formRef.current.setFieldsValue({ [key]: moment() });
  };
  const beforeSearchSubmit = params => {
    params['orderStartDate'] = params.orderStartDate? params.orderStartDate.format('YYYY-MM-DD'): '';
    params['orderEndDate'] = params.orderEndDate ? params.orderEndDate.format('YYYY-MM-DD') : '';
    params['flightStartDate'] = params.flightStartDate ? params.flightStartDate.format('YYYY-MM-DD') : '';
    params['flightEndDate'] = params.flightEndDate ? params.flightEndDate.format('YYYY-MM-DD') : '';
    return params;
  };
  const onReset = ()=>{
    formRef.current.setFieldsValue({
      orderStartDate: moment()
    })
    formRef.current.setFieldsValue({
      orderEndDate: moment()
    })
  }
  return (
    <>
      <ProTable
        scroll={{ x: 1100, y: 300 }}
        // className="rest-pro-table-form-compact"
        actionRef={actionRef}
        formRef={formRef}
        columns={columns}
        beforeSearchSubmit={beforeSearchSubmit}
        onReset={onReset}
        search={{
          span: { //设置排列方式
            xs: 24,
            sm: 24,
            md: 6,
            lg: 6,
            xl: 6,
            xxl: 6,
          }
        }}
        request={params => {
          if (!params['orderStartDate'] && !params['orderEndDate'] && firstLoadDate) {
            setFirstLoadDate(false);
            initNowDate(params, 'orderStartDate');
            initNowDate(params, 'orderEndDate');
          }
          setSearchParams(params);
          return getHeavyLuggageInputList(params);
        }}
        rowKey="id"
        postData={data => data}
        toolBarRender={() => [
          <div className={styles.btnWrapper}>
            <AuthComponent authCode="mkt.heavyLuggageInputDemo.export">
              <Button type="primary" onClick={exportExcelHandle}>
                导出
              </Button>
            </AuthComponent>
          </div>,
        ]}
      ></ProTable>
    </>
  );
}
